import React, { Component } from 'react';
import {Link,Route} from "react-router-dom";

import Detail from "./Detail/index.jsx";

export default class Message extends Component {
    state={
        messageArr:[
            {
                id:"01",title:"消息1"
            },
            {
                id:"02",title:"消息2"
            },
            {
                id:"03",title:"消息3"
            }
        ]
    };
    render() {
        const {messageArr} =this.state;
        return (
            <div>
                <ul>
                    {
                        messageArr.map((item)=>{
                            return (
                                <li key={item.id}>
                                    {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}
                                    {/* <Link to={`/home/message/detail?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}
                                    <Link replace={false} to={{pathname:"/home/message/detail",state:{id:item.id,title:item.title}}}>{item.title}</Link>
                                </li>
                            );
                        })
                    }
                </ul>
                <hr />
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}
                <Route path="/home/message/detail" component={Detail}></Route>
            </div>
        );
    };
};
